<template>
  <div class="common-table">
    <el-table
      :data="tableData"
      height="85%"
      border
      stripe
      row-key="id"
      :header-cell-style="{ background: '#fff',color: '#000',
      textAlign:'center',fontWeight:'bold',borderWidth:'1px'}"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="50"
        v-if="showSelection"
      >
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        v-for="(item, index) in tableLabel"
        :key="index"
        :prop="item.name"
        :label="item.label"
        :min-width="item.width ? item.width : 125"
      >
        <template slot-scope="scope">
          <span v-if="item.type === 'gender' ">{{ scope.row[item.name] ? '女' : '男' }}</span>

          <el-switch v-model="scope.row[item.name]" v-else-if="item.type === 'switch' " style="display: block"
                     active-color="#13ce66"
                     inactive-color="#ccc"
                     active-text=""
                     inactive-text=""
                     :active-value="1"
                     :inactive-value="0"
                     @change="handleStatusChange(scope.row)"
          ></el-switch>



          <span v-else-if="item.type === 'link' ">
            <span style="color: #33aef0;cursor: pointer;" @click="triggerLink(scope.row)" >预览</span>
          </span>

          <span v-else-if="item.type === 'edit' ">

            <el-input v-model.trim="scope.row[item.name]" @change="handleStatusChange(scope.row,item.editType)"
                      @blur="handleStatusChange(scope.row,item.editType)"></el-input>
          </span>

          <span v-else>{{ scope.row[item.name] }}</span>



        </template>
      </el-table-column>
      <el-table-column v-if="defaultButtons" label="操作" :width="operationWidth?operationWidth:100" fixed="left">
        <template slot-scope="scope">


        <span v-show="defaultButtons">
            <el-button v-if="!noEdit" title="修改" size="mini" type="plain" @click="edit(scope.row)">
              <i class="el-icon-edit-outline"></i>
            </el-button>
            <el-popconfirm
              style="margin-left:10px;margin-right:10px"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="你确定删除吗？"
              @confirm="del(scope.row)"
            >
              <el-button  title="删除" size="mini" type="plain" slot="reference"
              ><i class="el-icon-delete"></i
              ></el-button>
            </el-popconfirm>
        </span>

          <slot name="slot1" :obj="scope.row"></slot>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination
      class="pager"
      layout="total,sizes,prev,pager,next,jumper"
      :page-size="pageConfig.size ? pageConfig.size : 10"
      :page-sizes="[5, 10, 15, 20]"
      :total="pageConfig.total"
      :current-page.sync="pageConfig.current"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>
<script>

export default {
  name: 'CommonTable',
  props: {
    tableData: Array,
    tableLabel: Array,
    pageConfig: Object,
    operationWidth: Number,
    defaultButtons: {
      type: Boolean,
      default:true
    },
    showSelection: {
      type: Boolean,
      default:true
    },
    noEdit: {
      type: Boolean,
      default:false
    }
  },
  data() {
    return {}
  },
  methods: {
    //改写分页触发事件，不用全局总线了
    handleSizeChange(size) {
      this.$bus.$emit('sizeChange',size)
    },
    handleCurrentChange(current) {
      this.$bus.$emit('currentChange',current)
    },
    del(row) {
      this.$bus.$emit('del',row)
    },
    edit(row) {
      // this.$parent.edit(row)
      this.$bus.$emit('edit',row);
    },
    handleSelectionChange(val) {
      this.$bus.$emit('selectionChange',val);
    },
    //行状态变化（编辑行记录）
    handleStatusChange(row,editType) {
      console.log(this.$parent.statusChange)
      if(this.$parent.statusChange){
        this.$parent.statusChange(row,editType)
      }else{
        this.$parent.$parent.$parent.statusChange(row,editType)
      }
    },
    triggerLink(row){
      this.$parent.triggerLink(row);
    }
  }
}
</script>
<style lang="less" scoped>
.common-table {
  height: calc(100% - 100px);
  min-height: 260px;
  background-color: white;
  position: relative;

  .pager {
    float: right;
  }
}

//修复在dialog中分页显示问题
.el-dialog .common-table .pager{
  position: absolute;
  bottom: -42px !important;
  right: 110px !important;;
}


</style>
